<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>指令</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <!--绑定指令-->
  <span v-bind:title="msg">鼠标悬停，查看绑定的动态信息（绑定跟{{}}作用一样）</span>
  <!--判断指令：if/else-->
  <h3 v-if="flag">flag为true才显示</h3>
  <h3 v-else>flag为false才显示</h3>
  <!--判断指令：if/else/else-if-->
  <h3 v-if="type=='A'">A</h3>
  <h3 v-else-if="type=='B'">B</h3>
  <h3 v-else>type不等于A或B</h3>
  <!--循环指令：for-->
  <li v-for="item in items"><!--反着来的：遍历出来的对象 in 待遍历的数组或集合-->
    {{item.list}}
  </li>
  <!--循环指令：带下标的for-->
  <li v-for="(item, index) in items"><!--反着来的：遍历出来的对象 in 待遍历的数组或集合-->
    {{item.list}} ====== {{index}}
  </li>
</div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      msg: "这是data里面的数据",
      flag: true,
      type: "A",
      items: [          // []：数组 || {}：对象
        {list: "苹果"},
        {list: "香蕉"},
        {list: "蓝莓"}
      ]
    }
  })
</script>
</html>